<template>
  <div class="lunbo1"  @mouseleave="autoPlay" @mouseenter="stop">
    <div class="lunbo1-btns">
      <div class="next" @click="gotoPage(nextIndex)">
        <img src="../images/right-icon.png" alt />
      </div>
      <div class="prev" @click="gotoPage(prevIndex)">
        <img src="../images/left-icon.png" alt />
      </div>
    </div>

       
    <div class="lunbo1-items" :style="{left: left}">
      <img 
      :src="lunbo1.img" 
      v-for="(lunbo1, index) in lunbo1s" 
      :key="index"
      :autoPlay="autoPlay"
      >
      
    </div>
    <div class>
      <ol class="point">
        <li 
        v-for="(lunbo1, index) in lunbo1s" 
        :key="index"
        :class="{'point-hover': currentIndex==index}"
        @click="gotoPage(index)"
        ></li>
        
      </ol>
    </div>
  </div>
</template>

<script>

export default {
    data(){
      return{
        lunbo1s:[
          {img: require("../images/565905df8f102bc8.jpg.webp")},
          {img: require("../images/81b8dbce8479b2c2.jpg.webp")},
          {img: require("../images/cd742bab2606c128.jpg.webp")},
          {img: require("../images/8f9e9e926ccd72e5.jpg.webp")},
          {img: require("../images/b4b3b3638c141b19.jpg.webp")}
        ],
        currentIndex: 0,
        left: '0px',
        lit: '0',
        timer: null
      }
    },
    computed:{
      prevIndex(){
        if(this.currentIndex == 0) {
          return this.lunbo1s.length - 1;
        }else{
          return this.currentIndex - 1;
        }
      },
      nextIndex(){
        if(this.currentIndex == this.lunbo1s.length - 1) {
          return 0;
        }else {
          return this.currentIndex + 1;
        }
      }
    },
    mounted (){
      this.autoPlay()
    },
    methods:{
      gotoPage(index){
        this.currentIndex = index
        this.left =  -(index * 590)+'px'

        // console.log(this.lunbo2s.length)
      },
      autoPlay(){
        this.timer = setInterval(() => {
          this.gotoPage(this.nextIndex)
        }, 1500)
      },
       stop () {
        clearInterval(this.timer)
    }
    },
}
</script>

<style lang="stylus" scoped>
.lunbo1 {
    float: left;
    width: 590px;
    position: relative;
    left: 10px;
    overflow: hidden;
}
.lunbo1-items {
    position: relative;
    left: 0;
    width: 2950px;
    height: 470px;
    
}
.lunbo1-items img {
    float: left;
    display: block;
}
.lunbo1-btns {
    position: absolute;
    width: 590px;
    top: 180px;
    z-index: 1;
}
.next {
    float: right;
    opacity: 0;
}
.next:hover{
    opacity: 1;
}
.prev {
    float: left;
    opacity: 0;
}
.prev:hover{
    opacity: 1;
}
.next img{
    width: 64px;
    
}
.prev img{
    width: 64px;
}
.point{
    
    position: absolute;
    left: 200px;
    bottom: 20px;
    width: 100%;
    text-align: center;
       
}
.point li{
    display: inline-block;
    width: 8px;
    height: 8px;
    line-height: 8px;
    background: white;
    font-size: 8px;
    border-radius: 50%;
    cursor: pointer;
    margin: 0 5px;
}
.point li.point-hover{
    background: orange;
    color: white
}
</style>